<template>
  <div class="table" style="margin-top: 20px">
    <!--显示用户-->
    <el-table :data="tableData" stripe style="width: 100%;margin: 10px 0">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="username" label="用户名" width="90"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50" align="center">
        <template slot-scope="scope">
          {{ changeSex(scope.row.sex) }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="电话" width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="乐谱名" width="180" align="center"></el-table-column>
      <el-table-column prop="intro" label="简介">
        <template slot-scope="scope" width="150%">
          <p style="height: 80px;line-height: 1.4em">{{ scope.row.intro }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="staff" label="乐谱" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="previewXml(scope.row.file)">乐谱显示</el-button>
        </template>

      </el-table-column>
      <el-table-column type="primary" label="审批" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleApproval(scope.row,0)">通过</el-button>
          <el-button size="mini" type="danger" @click="handleApproval(scope.row,1)">驳回</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div style="padding: 10px 0;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import {changeType, getConsumerType} from "../api/index";
import {mixin} from "@/mixins";
import showXml from '../util/showxml'

export default {
  mixins: [mixin],
  name: "Approval",
  data() {
    return {
      //查询
      tableData: [],
      total: 0,//分页，默认总数为0
      pageNum: 1,//分页，默认第一页
      pageSize: 5,//分页，默认一页有两条
    }
  },

  created() {
    this.getData();
  },
  methods: {
    //查询需要审批的用户
    getData() {
      this.tableData = [];//清空tableData里的数据
      getConsumerType(
        this.pageNum,
        this.pageSize
      ).then(res => {
        console.log("data=", res.data)
        const {records, total, pages} = res.data;
        this.tableData = records
        this.total = total
        if (this.pageNum > 1 && pages < this.pageNum) {
          console.log('当前页没有数据并且不是第一页是，重新请求前一页的数据')
          this.pageNum--;
          this.getData();
        }
      })
    },

    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.getData()//调用分页方法
    },
    //分页
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.pageNum = pageNum
      this.getData()//调用分页方法
    },
    // 处理审批
    handleApproval(row, status) {
      console.log({row})
      changeType(
        row.staffId, status
      ).then(res => {
        if (res.code===200){
          this.$message.success("操作成功")
          this.getData()//调用分页方法
        }else {
          this.$message.success("操作失败")
        }
      })
    },
    //查看乐谱
    previewXml(fileUrl) {
      // 这里传入不同的url，展示不同滴文件
      showXml(fileUrl)
    }

  }


}
</script>

<style scoped>


</style>
